<template>
	<view class="u-flex item u-p-20" :class="vertical?'u-flex-col':''" @click="goPage">
		<u-image :width="size" :height="size" :src="item.url"></u-image>
		<view class="u-flex-1 u-p-l-20">
			<view class="name u-line-1">
				{{item.name}}
			</view>
			<view class="u-flex u-m-t-20">
				<view class="label">{{item.label}}</view>
				<view class="delivery">{{item.delivery}}</view>
			</view>
			<view class="">
				<prices-box :item='item'></prices-box>
			</view>
			<view v-if="showSold" class="sold">
				{{item.sold}}人已买过
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		computed:{
			size(){
				return this.imageSize+'rpx'
			}
		},
		props: {
			item: {
				type: Object,
				default: () => {
					return {}
				}
			},
			showSold:{
				type: Boolean,
				default: true
			},
			vertical:{
				type:Boolean,
				default:false
			},
			imageSize:{
				type:[Number,String],
				default:'160'
			}
		},
		mounted() {

		},
		data() {
			return {};
		},
		methods: {
			goPage(){
				uni.navigateTo({
					url:'/pages/goods-detail/goods-detail?id='+this.item.id
				})
			}
		},
	}
</script>

<style lang="scss" scoped>
	.item {
		background-color: #FFFFFF;
		border-radius: 10rpx;
		width: 100%;
		.u-flex-1{
			width: 100%;
		}
		.name {
			font-weight: 600;
			width: 100%;
		}

		.label,
		.delivery {
			color: #ce5f4d;
			font-size: 24rpx;
			border: 1rpx solid #ce5f4d;
			padding: 0 5rpx;
			border-radius: 4rpx;
			transform: scale(0.8);
		}

		.delivery {
			color: #d9b89d;
			border: 1rpx solid #d9b89d;
		}

		.sold {
			color: #a3a6a3;
			font-size: 24rpx;
		}
	}
</style>
